import { useMount } from "ahooks";
import { useState } from "react";

import { DataMap } from '@grapecity/wijmo.grid';
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid';

const WijmoB0203 = () => {
    const [Data, setData] = useState()




    const getDataMap = () => {
        let countries = 'US,UK,Japan,Other'.split(','), arr = countries.map((name, id) => ({ id: id, name: name }))
        return new DataMap(arr, 'id', 'name');
    }

    const dataMap = getDataMap()
    useMount(() => {
        const map = getDataMap()
        const len = map.collectionView.items.length
        const data = [...Array(20)].map((_, i) => ({
            id: i,
            country: Math.floor(Math.random() * len),
            active: i % 5 !== 0,
            downloads: Math.round(Math.random() * 200000),
            sales: Math.random() * 100000,
            expenses: Math.random() * 50000
        }))
        setData(data)
    })

    if (Data) {
        return (
            <div className="Page">
                <FlexGrid showMarquee={true} itemsSource={Data}>
                    <FlexGridColumn binding="id" header="ID" isReadOnly={true} />
                    <FlexGridColumn binding="country" header="AutoComplete" width={160} dataMap={dataMap} dataMapEditor="AutoComplete" />
                    <FlexGridColumn binding="country" header="DropDownList" width={160} dataMap={dataMap} dataMapEditor="DropDownList" />
                    <FlexGridColumn binding="country" header="RadioButtons" width={320} dataMap={dataMap} dataMapEditor="RadioButtons" align="center" />
                    <FlexGridColumn binding="active" header="Active" />
                    <FlexGridColumn binding="downloads" header="Downloads" />
                    <FlexGridColumn binding="sales" header="Sales" />
                    <FlexGridColumn binding="expenses" header="Expenses" />
                </FlexGrid>

                <div>AutoComplete : 下来内容不可选择</div>
                <div>DropDownList : 下来内容可选择</div>
                <div>RadioButtons : 单选模式</div>

            </div>
        );
    }

};

export default WijmoB0203;